<div class="container">
    <div class="row row action-row">


        <div class="col-xs-3 col-sm-2 col-md-2 col-lg-2">
            <div class="btn-group" dropdown>
                <a href class="dropdown-toggle">
                   <span
                           class="glyphicon glyphicon-play-circle"></span>Start <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li ng-repeat="process in processes.data">
                        <a ng-click="startTheProcess(process)">{{process.name}}</a></li>
                    <li>
                </ul>
            </div>
        </div>

        <div class="text-right col-xs-offset-2 col-sm-offset-4  col-md-offset-4 col-lg-offset-5 col-xs-3 col-sm-2 col-md-2 col-lg-1">
            <div class="btn-group" dropdown>
                <a href class="dropdown-toggle">
                   <span
                           class="glyphicon glyphicon-filter"></span>Filter <b class="caret"></b>
                </a>
                <ul class="dropdown-menu text-left ">
                    <li ng-class="{selected: tasksType=='assignee'}"><a ng-click="loadTasksType('assignee')">My tasks</a></li>
                    <li ng-class="{selected: tasksType=='owned'}"><a ng-click="loadTasksType('owned')">Owned</a></li>
                    <li ng-class="{selected: tasksType=='involved'}"><a
                            ng-click="loadTasksType('involved')">Involved</a></li>
                    <li ng-class="{selected: tasksType=='unassigned'}"><a ng-click="loadTasksType('unassigned')">Unassigned</a>
                    </li>
                    <li ng-class="{selected: tasksType=='candidate'}"><a ng-click="loadTasksType('candidate')">Candidate User</a>
                    </li>

                    <li ng-hide="userGroups.data.length==0" class="divider"></li>
                    <li ng-repeat="group in userGroups.data ">
                        <a ng-click="loadTasksGroups(group)">{{group.name}}</a>
                    </li>

                </ul>
            </div>
        </div>

        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <input name="name" type="text" placeholder="Query" class="form-control"
                   ng-model="query">
        </div>

    </div>

    <div class="table-holder">

        <div ng-show="tasks.data.length==0" class="text-center">No tasks here!</div>

        <div class="row user-row" ng-repeat="task in tasks.data | filter:query" ng-click="loadTask(task)"
             priority="{{task.priority}}"
             ng-class="task.priority<31?'row-success':task.priority<51?'row-warning':'row-danger'">

            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
                {{task.assignee}}
            </div>

            <div class="col-xs-7 col-sm-7 col-md-9 col-lg-9">
                <strong>{{task.name}}</strong><br>
                <span class="text-muted">{{task.description}}</span>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-2 col-lg-2 text-right" aa-past="task.dueDate">
                <span class="glyphicon glyphicon-calendar"></span>
                <span am-time-ago="task.dueDate"></span>
            </div>
        </div>
    </div>

</div>

<!--

<div class="task-holder-main" style="    position: fixed;    bottom: 0px;display: none;" >
    <div class="task-holder" ng-repeat="detailedTask in detailedTasks">
        <div class="title-bar">
            <strong>{{detailedTask.name}}</strong>

            <div class="dropdown" style="float:right">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="padding: 0px 6px 0px;">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="left: -620%;">
                    <li role="presentation"><a role="menuitem" tabindex="-1"  ng-click="assignMe(detailedTask)">Assign Me</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1"  ng-click="takeOwnerShip(detailedTask)">Take ownership</a></li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" >Reassign</a></li>

                </ul>
            </div>
        </div>
        <div class="row" style="    padding: 10px;min-height: 100%;margin-bottom: 96px;">
            <div class="col-md-12  col-sm-12 cel">
                <div class="row" style="padding-bottom: 10px;">

                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <span class="glyphicon glyphicon-time"></span> <strong
                            am-time-ago="detailedTask.createTime"></strong>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" aa-past="task.dueDate">
                        <span class="glyphicon glyphicon-calendar"></span> <strong
                            am-time-ago="detailedTask.dueDate"></strong>
                    </div>
                    <div class="col-xs-2 col-sm-22 col-md-2 col-lg-2">
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <span class="glyphicon glyphicon-user"></span> <strong>{{detailedTask.assignee}}</strong>
                    </div>

                </div>


                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <strong>{{detailedTask.description}}</strong>
                    </div>
                </div>

                <div class="row" ng-repeat="item in detailedTask.form.formProperties">
                    <div class="form-group" style="margin:15px 15px;">
                        <label>{{item.name}} <span ng-show="item.required">* </span></label>

                        <input ng-if="item.type=='string'" ng-visible="item.readable"
                               ng-disabled="{{item.writable == false}}" ng-required="item.required"
                               type="text" class="form-control" placeholder="{{item.name}}"
                               ng-model="detailedTask.propertyForSaving[item.id].value">


                        <input ng-if="item.type=='long'" ng-visible="item.readable" ng-enabled="item.writable"
                               ng-required="item.required"
                               type="number" class="form-control" placeholder="{{item.name}}"
                               ng-model="detailedTask.propertyForSaving[item.id].value">

                        <input ng-if="item.type=='boolean'" ng-visible="item.readable" ng-enabled="item.writable"
                               ng-required="item.required"
                               type="checkbox" class="form-control" placeholder="{{item.name}}"
                               ng-model="detailedTask.propertyForSaving[item.id].value" style="width:16px;">

                        <div ng-if="item.type=='enum'" class="btn-group" dropdown>
                            <button type="button" class="btn btn-primary dropdown-toggle" ng-visible="item.readable"
                                    ng-enabled="item.writable" ng-required="item.required">
                                {{detailedTask.propertyForSaving[item.id].value==null?"Select":detailedTask.propertyForSaving[item.id].name}}
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li ng-repeat="enum in item.enumValues">
                                    <a id="{{enum.id}}"
                                       ng-click="setFormEnum(enum,detailedTask.propertyForSaving[item.id])">{{enum.name}}</a>
                                </li>

                            </ul>
                        </div>

                        <div class="row" ng-if="item.type=='date'">
                            <div class="col-md-6">
                                <p class="input-group">
                                    <input type="text" class="form-control" datepicker-popup="{{item.datePattern}}"
                                           is-open="detailedTask.propertyForSaving[item.id].opened"
                                           ng-model="detailedTask.propertyForSaving[item.id].value"
                                           ng-enabled="item.writable"
                                           ng-required="item.required"
                                           close-text="Close"/>
                                     <span class="input-group-btn">
                                         <button type="button" class="btn btn-default"
                                                 ng-click="open(detailedTask.propertyForSaving[item.id],$event)"><i
                                                 class="glyphicon glyphicon-calendar"></i></button>
                                     </span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="    padding: 10px;    padding: 10px;    position: relative;    margin-top: -90px;">
            <div class="col-md-offset-7 col-md-2  col-sm-2">
                <button type="button" class="btn btn-default" ng-click="cancel(detailedTask);">Close</button>

            </div>
            <div class="col-md-2  col-sm-2">

                <button type="button" class="btn btn-primary" ng-click="finish(detailedTask)">Finish Task</button>
            </div>
        </div>
    </div>
</div>-->
